<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <title>Document</title>
  <style>
  /*1.方便布局，将所有元素默认样式清除*/
  *{
	box-sizing:border-box;
	margin:0px;
	padding:0px;
  }
  /*2.设置“主页”处水平导航栏效果*/
  ul.a{
	list-style-type:none;
	overflow:hidden;
	background-color:#CDCDCD;
  }
  ul.a li{
	float:left;
  }
  ul.a li a{
	display:inline-block;
	color:white;
	text-align:center;
	padding:16px;
	text-decoration:none;
  }
  ul li a:hover{
	background-color:#222
  }
  ul.a li a.active{
	color:white;
	background-color:#4CAF50;
  }
  /*3.设置中间主题内容的布局*/
  .column{
	float:left;
	padding:15px;
  }
  .sidemenu{
	width:25%;
  }
  .content{
	width:75%;
  }
  /*4.设置中间主体内容中左侧垂直导航栏效果*/
  .sidemenu ul{
	list-style-type:none;
  }
  .sidemenu li a{
	margin-bottom:4px;
	display:block;
	padding:8px;
	background-color:#eee;
	text-decoration:none;
	color:#666;
  }
  .sidemenu li a:hover{
	background-color:#555;
	color:white;
  }
  .sidemenu li a:active{
	background-color:#008CBA;
	color:white;
  }
  /*5.设置中间主体内容中左侧正文的效果*/
  .header{
	background-color:#2196F3;
	color:white;
	text-align:center;
	padding:15px;
  }
  /*设置底部部分的效果*/
  .footer{
	clear:both;
	background-color:#CDCDCD;
	color:white;
	padding:15px;
  }
  </style>
 </head>
 <body>
 <ul class="a">
 <li><a href="#home" class="active">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系我们</a></li>
  <li><a href="#about">关于我们</a></li>
  </ul>
  <div class="body">
   <div class="column sidemenu">
   <ul>
   <li><a href="#flight">The Flight</a></li>
   <li><a href="#city">The City</a></li>
   <li><a href="#island">The Island</a></li>
   <li><a href="#food">The Food</a></li>
   <li><a href="#people">The People</a></li>
   <li><a href="#history">The History</a></li>
   <li><a href="#oceans">The Oceans</a></li>
   </ul>
   </div>
   <div class="column content">
   <div class="hearder">
   <h1>The City</h1>
   </div>
   ……
   <p>You will learn more about responsive web pages in a later chapter.</p>
  </div>
  </div>
  <div class="footer">
  <p>底部文本</p>
  </div>
 </body>
</html>
